<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="24" align="right">
                <el-upload
                        ref="upload"
                        :on-exceed="fileOnExceed"
                        :limit="1"
                        accept=".html"
                        action="/api/file/upload"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="fileUploadSuccess"
                        :on-error="fileUploadError"
                        :file-list="fileList"
                        :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器
                    </el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "WTools",
        data() {
            return {
                fileList: []
            };
        }, methods: {
            fileOnExceed(files, fileList) {
                // console.log("fileOnExceed", files)
                // console.log("fileOnExceed", fileList)
                this.fileList.shift();
                this.fileList.push(files[0])

            },
            fileUploadSuccess(response, file, fileList) {
                console.log("fileUploadSuccess", response)
                console.log("fileUploadSuccess", file)
                console.log("fileUploadSuccess", fileList)
            },
            fileUploadError(err, file, fileList) {
                // console.log("fileUploadError", err)
                console.log("fileUploadError", file)
                // console.log("fileUploadError", fileList)
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log("handleRemove", file, fileList);
            },
            handlePreview(file) {
                console.log("handlePreview", file);
            }
        }
    }
</script>

<style scoped>

</style>